import { useState, useCallback } from 'react'
import type { FC } from 'react'
import './App.css'
import Header from './components/Header'
import Footer from './components/Footer'
import Hero from './components/Hero'
import CategoryTabs from './components/CategoryTabs'
import ListsGrid from './components/ListsGrid'
import { categories, mockLists, type ListItem } from './data/mockData'

const App: FC = () => {
  const [activeCategory, setActiveCategory] = useState<string>('all')
  const [filteredLists, setFilteredLists] = useState<ListItem[]>(mockLists)

  // 分类映射常量，避免在函数内部重复创建
  const categoryMap: Record<string, string> = {
    'goods': '平价好物',
    'media': '影视/书籍',
    'sports': '运动/减肥'
  }

  // 处理分类切换，使用useCallback避免不必要的重新渲染
  const handleCategoryChange = useCallback((categoryId: string) => {
    setActiveCategory(categoryId)
    
    if (categoryId === 'all') {
      setFilteredLists(mockLists)
    } else {
      const categoryName = categoryMap[categoryId] || ''
      // 只有当分类名称有效时才进行过滤，避免不必要的计算
      if (categoryName) {
        const filtered = mockLists.filter(list => list.category === categoryName)
        setFilteredLists(filtered)
      }
    }
  }, [])

  // 处理探索按钮点击，使用useCallback避免不必要的重新渲染
  const handleExploreClick = useCallback(() => {
    // 滚动到清单区域
    const listsSection = document.getElementById('lists-section')
    if (listsSection) {
      listsSection.scrollIntoView({ behavior: 'smooth' })
    }
  }, [])

  return (
    <div className="min-h-screen bg-gradient-to-br from-light to-gray-100">
      <Header title="清单集合" subtitle="分享你的好物推荐和生活经验" />
      
      <main className="container mx-auto px-4 py-8">
        <Hero 
          title="发现生活中的美好"
          description="这里是整理和分享各种推荐清单的平台，包括平价好物、影视书籍、运动减肥等多个分类。开始探索这些精选清单，发现更多生活的美好！"
          buttonText="开始探索"
          onButtonClick={handleExploreClick}
        />
        
        <section id="lists-section" className="mt-12">
          <CategoryTabs 
            categories={categories}
            activeCategory={activeCategory}
            onSelectCategory={handleCategoryChange}
          />
          <ListsGrid lists={filteredLists} />
        </section>
      </main>
      <Footer />
    </div>
  )
}

export default App